<template>
    <view class="flex-col homepage">
        <view class="flex-row wrapper">
            <view class="u-line-1 text">持卡人姓名</view>
            <u-input class="input" v-model="user.userName" placeholder="请输入"></u-input>
        </view>
        <view class="flex-row wrapper-two">
            <view class="u-line-1 text-two">手机号码</view>
            <u-input class="input1" v-model="user.phone" placeholder="请输入"></u-input>
        </view>
        <view class="flex-row wrapper-three" >
            <view class="u-line-1 text-three">绑定车辆</view>
			<view style="position: absolute; left: 150rpx;">
            <uni-data-select
                  v-model="mouthCard.vehicleCarId"
                  :localdata="columns"
                  @change="change"
                ></uni-data-select>
            <!-- <u-input class="inputs" v-model="mouthCard.vehicleCarId" placeholder="请输入"></u-input> -->
			</view>
        </view>
        <view class="flex-col flex-row wrapper-four">
            <view class="flex-row wraper-row">
                <view class="u-line-1 text-six">办理人</view>
                <view class="u-line-1 text-seven">{{user.userName}}</view>
            </view>
            <view class="flex-row wraper-row-two" @click="start()">
                <view class="u-line-1 text-eight">生效日期</view>
                <u-calendar title="生效日期" :show="show" :mode="mode" @confirm="confirm"  @close="close()"></u-calendar>
                <u-input class="input1" type="date" v-model="mouthCard.effectiveTime" placeholder="请输入" style="position:absolute; left: 180rpx;"></u-input>
            </view>
        </view>
        <view class="flex-row wrapper-five" @click="start1()">
            <view class="u-line-1 text-eleven">到期时间</view>
            <u-calendar title="到期时间" :show="show1" :mode="mode" @confirm="confirm1"  @close="close()"></u-calendar>
            <u-input class="input1" v-model="mouthCard.maturityTime" placeholder="请输入" style="position:absolute; left: 180rpx;"></u-input>
        </view>
        <view class="flex-row wrapper-six">
            <view class="u-line-1 text-fourteen">费用合计</view>
            <view class="u-line-1 text-fifteen">￥1000.00</view>
        </view>
        <view class="flex-col wrapper-seven">
            <view class="u-line-1 text-sixteen">备注</view>
            <u-input class="input-two" v-model="mouthCard.remark" placeholder="请输入"></u-input>
        </view>
        <u-button class="button" type="success" size="medium" @click="buy()">
            确认购买
        </u-button>
        <u-button class="button" type="success" size="medium" @click="back()">
            返回
        </u-button>
    </view>
</template>
<script>
  import request from '../../../request.js'
    export default {
        data() {
            return {
                userId:'',
                user:{},
                mode:'single',
                carShow:false,
                columns:[],
                show:false,
                show1:false,
                mouthCard:{
                  cardName:'',
                  phone:'',
                  total:1000,
                },
            }
        },
        created(){
          this.userId=localStorage.getItem("userId")
          this.getUser()
          this.getAllCar()

        },
        methods: {
          back(){
            uni.redirectTo({
            	url:'./Myvehicle'
            })
          },
          buy(){
            this.mouthCard.cardName = this.user.userName
            this.mouthCard.phone = this.user.phone
            this.mouthCard.transactor = this.user.userName
            this.mouthCard.effectiveTime = Date.parse(this.mouthCard.effectiveTime)
            this.mouthCard.maturityTime = Date.parse(this.mouthCard.maturityTime)
            console.log(this.mouthCard)
			localStorage.setItem("mouthCard",JSON.stringify(this.mouthCard))
			uni.navigateTo({
				url: './chongzhi'
			})

          },
          //转换时间戳
                RecordData(time) {
                  let date = new Date(time);
                  let Y = date.getFullYear() + '-';
                  let M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) + '-' : date.getMonth() + 1 + '-';
                  let D = date.getDate() < 10 ? '0' + date.getDate() + ' ' : date.getDate() + ' ';
                  let h = date.getHours() < 10 ? '0' + date.getHours() + ':' : date.getHours() + ':';
                  let m = date.getMinutes() < 10 ? '0' + date.getMinutes() + ':' : date.getMinutes() + ':';
                  let s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
                  return Y + M + D + h + m + s;
                },
          change(e){
            this.mouthCard.vehicleCarId = e
          },
          //获取所有车辆
          getAllCar(){
            request({
            	url: `/carshop/vehicle-car/getAllCar`,
            	method: 'Post',
            	success: (res) => {

                for(let i=0; i<res.data.data.car.length; i++){
                  var car = res.data.data.car[i]
                  var a={
                        value:car.vehicleCarId,
                        text:car.vehicleNumber,
                  }
                  this.columns.push(a)

                }


            	}
            })
          },
          //根据userId 获取用户信息
          getUser(){
            request({
            	url: `/systemuser/user/getUser/${this.userId}`,
            	method: 'get',
            	success: (res) => {
            		this.user=res.data.data.user
            	}
            })
          },
          confirm(e) {
          	this.mouthCard.effectiveTime = e[0]
            this.show = false

          },
          confirm1(e) {
            this.mouthCard.maturityTime = e[0]
            this.show1 = false
          },
          start(){
            this.show = true
          },
          start1(){
            this.show1   = true
          },
          close(){
            this.show = false
            this.show1 = false
          }
        }
    }
</script>
<style lang="scss" scoped>
    /** 全局样式-开始,建议放在公共css样式文件中,比如common.css 或app.vue文件 */


    html,
    body {
        margin: 0;
        width: 100%;
        height: 100%;
        font-size: 16px
    }

    view,
    text,
    image {
        position: relative;
        box-sizing: border-box;
        flex-shrink: 0;
    }

    .flex-col {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
    }

    .flex-row {
        display: flex;
        align-items: flex-start;
    }

    .flex-col .flex-row {
        width: 100%
    }

    /** 全局样式-结束*/

    .homepage {
        padding: 40rpx 0rpx 180rpx 12rpx;

        .wrapper {
            width: 686rpx;
            justify-content: space-between;
            margin-left: 6rpx;
            padding: 29rpx 201rpx 29rpx 11rpx;
            border-bottom-width: 2rpx;
            border-bottom-style: solid;
            border-bottom-color: rgba(226, 226, 226, 1);

            .text {
                width: 180rpx;
                margin-top: 10rpx;
                font-size: 30rpx;
                font-weight: 600;
                color: rgba(106, 106, 106, 1);
            }

            .input {
                width: 444rpx;
                height: 52rpx;
				margin-top: 10rpx;
				border: none;
            }
        }

        .wrapper-two {
            width: 686rpx;
            justify-content: space-between;
            margin: 0rpx 0rpx 2rpx 6rpx;
            padding: 29rpx 200rpx 29rpx 10rpx;
            border-bottom-width: 2rpx;
            border-bottom-style: solid;
            border-bottom-color: rgba(226, 226, 226, 1);

            .text-two {
                width: 180rpx;
                margin-top: 12rpx;
                font-size: 30rpx;
                font-weight: 600;
                color: rgba(106, 106, 106, 1);
            }

            .input1 {
                width: 444rpx;
                height: 52rpx;
            	margin-top: 10rpx;
            	border: none;
            }
        }

        .wrapper-three {
            width: 686rpx;
            margin-left: 6rpx;
            padding: 40rpx 0rpx 38rpx 9rpx;
            border-bottom-width: 2rpx;
            border-bottom-style: solid;
            border-bottom-color: rgba(226, 226, 226, 1);

            .text-three {
                width: 126rpx;
                margin: 30rpx 102rpx 0rpx 0rpx;
                font-size: 30rpx;
                font-weight: 600;
                color: rgba(119, 119, 119, 1);
            }

            .text-four {
                width: 116rpx;
                margin-right: 308rpx;
                font-size: 30rpx;
                font-weight: 600;
                color: rgba(106, 106, 106, 1);
            }

            .text-five {
                width: 28rpx;
            }
        }

        .wrapper-four {
            width: 690rpx;
            margin: 0rpx 0rpx -2rpx 6rpx;

            .wraper-row {
                width: 686rpx;
                justify-content: space-between;
                margin-bottom: -12rpx;
                padding: 33rpx 354rpx 40rpx 10rpx;
                border-bottom-width: 2rpx;
                border-bottom-style: solid;
                border-bottom-color: rgba(226, 226, 226, 1);

                .text-six {
                    width: 126rpx;
                    font-size: 30rpx;
                    font-weight: 600;
                    color: rgba(119, 119, 119, 1);
                }

                .text-seven {
                    width: 116rpx;
                    margin-top: 6rpx;
                    font-size: 30rpx;
                    font-weight: 600;
                    color: rgba(106, 106, 106, 1);
                }
            }

            .wraper-row-two {
                width: 686rpx;
                padding: 40rpx 0rpx 40rpx 9rpx;
                border-bottom-width: 2rpx;
                border-bottom-style: solid;
                border-bottom-color: rgba(226, 226, 226, 1);

                .text-eight {
                    width: 126rpx;
                    margin-right: 92rpx;
                    font-size: 30rpx;
                    font-weight: 600;
                    color: rgba(119, 119, 119, 1);
                }

                .text-nine {
                    width: 244rpx;
                    margin-right: 190rpx;
                    font-size: 30rpx;
                    font-weight: 600;
                    color: rgba(106, 106, 106, 1);
                }

                .text-ten {
                    width: 28rpx;
                }
            }
        }

        .wrapper-five {
            width: 686rpx;
            margin-left: 6rpx;
            padding: 39rpx 0rpx 40rpx 13rpx;
            border-bottom-width: 2rpx;
            border-bottom-style: solid;
            border-bottom-color: rgba(226, 226, 226, 1);

            .text-eleven {
                width: 126rpx;
                margin-right: 88rpx;
                font-size: 30rpx;
                font-weight: 600;
                color: rgba(119, 119, 119, 1);
            }

            .text-twelve {
                width: 244rpx;
                margin-right: 190rpx;
                font-size: 30rpx;
                font-weight: 600;
                color: rgba(106, 106, 106, 1);
            }

            .text-thirteen {
                width: 28rpx;
            }
        }

        .wrapper-six {
            width: 686rpx;
            height: 120rpx;
            justify-content: space-between;
            margin-left: 6rpx;
            padding: 31rpx 285rpx 0rpx 15rpx;
            border-bottom-width: 2rpx;
            border-bottom-style: solid;
            border-bottom-color: rgba(226, 226, 226, 1);

            .text-fourteen {
                width: 126rpx;
                font-size: 30rpx;
                font-weight: 600;
                color: rgba(119, 119, 119, 1);
            }

            .text-fifteen {
                width: 190rpx;
                font-size: 32rpx;
                font-weight: 700;
                color: rgba(255, 131, 131, 1);
            }
        }

        .wrapper-seven {
            width: 696rpx;
            height: 228rpx;
            margin-bottom: 146rpx;
            padding: 23rpx 0rpx 0rpx 14rpx;
            border-bottom-width: 2rpx;
            border-bottom-style: solid;
            border-bottom-color: rgba(210, 210, 210, 1);

            .text-sixteen {
                width: 80rpx;
                margin-bottom: 36rpx;
                font-size: 30rpx;
                font-weight: 600;
                color: rgba(74, 74, 74, 1);
            }

            .input-two {
				width: 644rpx;
				height: 62rpx;
				border:none;
            }
        }

        .button {
            width: 696rpx;
            height: 80rpx;
            margin: 1rpx 0rpx 0rpx 12rpx;
            font-size: 34rpx;
            background: rgba(48, 121, 255, 1);
            font-weight: 600;
        }
    }
</style>